<!--  -->
<template>
  <div class="top_nav_box" :class="{bg:isAddClass}">
      <div class="left_box" @click='$router.push("/login")'>返回</div>
      <div class="middle_box" >首页</div>
      <div class="right_box" @click='$router.push("/search")'>搜索</div>
  </div>
</template>

<script>
    export default {
        data() {
            return {
                isAddClass: false,
                flag: false
            };
        },
        created() {
            window.addEventListener('scroll', this.scroll, false) //最后这个布尔值参数是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。默认为false;
        },
        methods: {
            //导航栏滚动变色
            scroll(e) {
                if (!this.flag) {
                    this.flag = true;
                    setTimeout(() => {
                        this.flag = false;
                    }, 20)
                    let str = document.documentElement.scrollTop || document.body.scrollTop;
                    if (str > 50) {
                        this.isAddClass = true;
                    } else {
                        this.isAddClass = false;
                    }
                }
            }
        },
        beforeDestory() {
            window.removeEventListener('scroll', this.scroll, false)
        }
    }
</script>
<style lang='less' scoped>
    .top_nav_box {
        display: flex;
        position: fixed;
        z-index: 20;
        top: 0;
        left: 0;
        width: 100%;
        height: 50px;
        align-items: center;
        .left_box {
            flex: 1;
            background: transparent;
        }
        .middle_box {
            flex: 2;
            background: transparent;
        }
        .right_box {
            flex: 1;
            background: transparent;
        }
        &.bg {
            background-color: rgb(56, 151, 151);
            color: #fff;
        }
    }
</style>